<template>
  <h1>app-appName: {{ $store.state.app.appName }}</h1>
  <h1>user-userInfo: {{ $store.state.user.userInfo }}</h1>
  <h2>app-appNameLength: {{ $store.getters.appNameLength }}</h2>

  <button @click="$store.commit('user/changeAppName', 'Hello')">
    修改 AppName
  </button>

  <button @click="changeAppName('World')">修改 AppName</button>

  <button @click="asyncChangeName('World')">async 修改 AppName</button>

  <BasicLayout />
</template>

<script>
// 可以使用 alias 路径别名，找路径会比较方便，后续如果路径发生变化，只需要修改一处即可
import BasicLayout from "@/layout/basic-layout.vue";

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  components: {
    BasicLayout,
  },

  computed: {
    // ...mapState(["appName", "userInfo"]),
    ...mapState("app", ["appName"]),
    ...mapState("user", ["userInfo"]),
    ...mapGetters("app", ["appNameLength"]),
  },

  methods: {
    ...mapMutations("app", ["changeAppName"]),
    ...mapActions("app", ["asyncChangeName"]),
  },

  mounted() {
    console.log(this.$store);
  },
};
</script>
